<script setup lang="ts">
import { defineEmits, defineProps, ref } from "vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";

const props = defineProps<{
  value: number | string | null;
  label: string;
  type: "number" | "text";
}>();
const emit = defineEmits(["update:value"]);
const currentValue = ref(props.value);
const handleChange = (value: any) => {
  let emitValue: number | string | null = null;
  emitValue = currentValue.value;
  if (props.type === "number") emitValue = Number(currentValue.value);
  if (currentValue.value === "") emitValue = null;
  emit("update:value", emitValue);
};
</script>

<template>
  <a-form-item class="searchItem" :label="props.label">
    <a-input v-model:value="currentValue" @change="handleChange" allowClear>
    </a-input>
  </a-form-item>
</template>

<style scoped>
.searchItem {
  margin: 10px;
}
</style>
